<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>datepicker</title>
		<script type="text/javascript">var CTP_WEB_FULLPATH = "../../"</script>
		<script type="text/javascript" src="../../js/jquery/jquery.js"></script>
		<script type="text/javascript" src="../../js/jqueryui/jquery-ui-debug.js"></script>
		<script type="text/javascript" src="../../js/ctp/public/ctp.core.js"></script>
		<script type="text/javascript" src="../../js/ctp/public/jsextend.js"></script>
		<script type="text/javascript" src="../../js/ctp/textfield/ctp.ui.textfield.js"></script>
		<script type="text/javascript" src="../../js/ctp/datepicker/ui.datepicker.js"></script>
		<script type="text/javascript" src="../../js/ctp/datepicker/ctp.ui.datepicker.js"></script>
		<script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js"></script>

		<link href="../../css/button.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/datepicker.css" rel="stylesheet" type="text/css"/>


		<link href="../../css/skins/red/ctp-common.css" rel="stylesheet" type="text/css"/>
		<script type="text/javascript">
			var datepicker;
			var datepicker2,datepicker3;
			$(document).ready(	
				function(){
				//document.addEventListener("DOMMouseScroll",function(){alert(4)},false);
				/*
					datepicker = new ctp.ui.datepicker({
						validate:'',
						submit:true,
						renderTo: 'body', 
						isInput:true,
						width:'200px',
						changeMonth:false,//是否有下拉框可以手动修改月份
						changeYear:false,//是否有下拉框可以手动修改年份
						onSelect: function(){ //回调函数
							alert('欢迎使用日期控件');
						},
						showButtonPanel:false,//控件关闭按钮是否展现
						defaultDate:50,//默认选中日期和当前日期差值
						numberOfMonths:3,//控件上显示的月份数目
						minDate:-100,//控件显示的最小日期和当前日期差值
						maxDate:100,//控件显示的最大日期和当前日期差值
						showOtherMonths:false,//是否显示下个月的内容
						selectOtherMonths:false,//是否可以显示其他月份
						showWeek:true,//是否显示周
						firstDay:3,//控件第一个日期是星期几
						dateFormat:'yy/mm/dd'
					});*/
					datepicker3 = new ctp.ui.datepicker({
						renderTo: 'container', 
						isInput:true,
						dateFormat:'yymmdd',
						id:'datepicker3',
						onSelect:function(){
							
						}
					});
					new ctp.ui.datepicker({
						renderTo: 'container', 
						isInput:true,
						id:'datepicker4'
					});
					new ctp.ui.datepicker({
						renderTo: 'container', 
						isInput:true,
						dateFormat:'yymmdd',
						id:'datepicker5'
					});
					new ctp.ui.datepicker({
						renderTo: 'container', 
						isInput:true,
						value:'',
						id:'datepicker6',
						showButtonPanel:true,
						changeMonth:true,
						changeYear:true,
						numberOfMonths:3
					});
					
					/*
					datepicker2 = new ctp.ui.datepicker({
						id: null,
						//其他默认属性的key/value
						isVisible:true,//组件是否显示
						renderTo: 'afdsaf', //定位时相对的父元素 ，为空则认为不加载，为body为绝对位置
						isInput:false,
						offset_x: '50px', //X轴偏移位置
						offset_y: '50px', //Y轴偏移位置
						altField:'ccc',//显示选择日期结果的容器ID
						altFormat:'yy/mm/dd',//显示选择日期结果的格式
						showAnim:'show',//展现日期控件动画
						showButtonPanel:false,//控件关闭按钮是否展现
						changeMonth:false,//是否有下拉框可以手动修改月份
						changeYear:false,//是否有下拉框可以手动修改年份
						defaultDate:null,//默认选中日期和当前日期差值
						numberOfMonths:1,//控件上显示的月份数目
						minDate:null,//控件显示的最小日期和当前日期差值
						maxDate:null,//控件显示的最大日期和当前日期差值
						showOtherMonths:false,//是否显示下个月的内容
						selectOtherMonths:false,//是否可以显示其他月份
						showWeek:false,//是否显示周
						firstDay:null,//控件第一个日期是星期几
						dateFormat:'yy/mm/dd',
						onSelect: function(){ //回调函数
							alert('欢迎使用日期控件2');
							datepicker2.setVisible(false);
						}
					});*/
					//$('#bbb').datepicker();
					//$('#ccc').datepicker();
				}
				
			);
			var setShow = function(){
				datepicker3.setVisible(true);
			}
			var setHide = function(){
				datepicker3.setVisible(false);
			}
			var remove = function(){
				datepicker3.remove();
			}
			var getValue = function(){
				alert(datepicker3.getValue());
			}
			var reset = function(){
				datepicker3.reset();
			}
		</script>
	</head>
	<body>
		<div id="container" style="height:150px;border:1px solid #888888;overflow:auto;position:relative;text-align:center;">
			<br><br><br><br><br><br><br><br><br><br>
			<button onclick="setShow();">显示控件</button><button onclick="setHide();">隐藏控件</button>
			<button onclick="remove();">删除控件</button>	
			<button onclick="getValue();">获取日期控件值</button>
			<button onclick="reset();">重置日期控件</button>
			<select id="format">
				<option value="mm/dd/yy">Default - mm/dd/yy</option>
				<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
				<option value="d M, y">Short - d M, y</option>
				<option value="d MM, y">Medium - d MM, y</option>
				<option value="DD, d MM, yy">Full - DD, d MM, yy</option>
				<option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
			</select>
			<label id='aaa'>bbb</label>
			<div>af sq ar hy az eu bs bg ca zh-HK zh-CN zh-TW hr cs da nl en-GB eo et fo fa fi</div>
		</div>
		
			
			<!--div>
			当前显示的选项序号（num）:<input id='active' value=0></input><button onclick="accor1.setActive(document.getElementById('active').value*1)">设置</button>
			是否显示：<input id='isVisible' value='true'></input><button onclick="accor1.setVisible(document.getElementById('isVisible').value=='true'?true:false)">设置</button>
			是否可拖拽：<input id='sortable' value='true'></input>
			效果:<input id='animated' value='slide'></input>
			是否设置最高高度:<input id='autoHeight' value='false'></input>
			是否清除样式:<input id='clearStyle' value='false'></input>
			单击是否折叠:<input id='collapsible' value='false'></input>
			触发事件:<input id='event' value='click'></input>
			设置选项的头：<input id='header' value='> li > :first-child,> :not(li):even'></input>
			设置宽和高：<input id='width' value='500px'></input><input id='height' value='500px'></input><button onclick="accor1.setSize({height:document.getElementById('height').value=='0'?null:document.getElementById('height').value,width:document.getElementById('width').value=='0'?null:document.getElementById('width').value})">设置</button>
			<br />
			<button onclick="newAccordion()">创建Accordion</button>
			</div-->
		
		
		
		
	</body>
</html>